<template>
    <div
        class="container"
        @click="onClick">
        <div class="msgcontent">{{ message.msgcontent }}</div>
        <div class="msgfoot">
            <div
                class="msgdot"
                v-if="message.status === '1'"></div>
            <div class="msgcreatetime">
                {{ formatDate(message.savetime) }}
            </div>
            <van-button
                plain
                color="#1890ff"
                class="footer-btn"
                v-if="message.status === '1'"
                @click.stop="onRead()"
            >
                {{ $st("message_set_read") }}
            </van-button>
        </div>
    </div>
</template>

<script lang="js">

import { reactive, toRefs } from 'vue';
import moment from 'moment';
// import { dealMessage } from '@/api/server.js';
// import { apiService } from '@/api/apiService.js';
import { SystemMessageSetup } from '@/setup/message/SystemMessageSetup.js';
export default {
    name: '',
    components: {},
    props: {
        message: Object
    },
    emits: ['readed'],
    setup (props, context) {
        console.log(props.message.status);
        const state = reactive({

        });
        const formatDate = (time) => {
            return moment(time).format('YYYY-MM-DD HH:mm:ss');
        };
        const { dealMessage } = SystemMessageSetup();
        const onClick = () => {
            if (props.message.status === '1') {
                const params = props.message.msgtype === '1' ? {} : { agree: false };
                dealMessage(props.message.eventid, params, () => {
                    context.emit('clickMsg', props.message);
                });
            } else {
                context.emit('clickMsg', props.message);
            }
        };
        const onRead = () => {
            const params = props.message.msgtype === '1' ? {} : { agree: false };
            dealMessage(props.message.eventid, params, () => {
                context.emit('readed', props.message);
            });
            // apiService({
            //     api: dealMessage,
            //     params: {
            //         eventid: props.message.msgid
            //     },
            //     success: () => {
            //         context.emit('readed', props.message);
            //     }
            // });
        };
        return {
            formatDate,
            onClick,
            onRead,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.container {
  height: auto;
  line-height: 24px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);

  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
padding: 10px;
}
.msgcontent {
  text-align: LEFT;
}
.msgfoot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 15px 5px 5px 0px;
}
.msgcreatetime {

  flex-grow: 1;

}
.msgdot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: red;
  margin: 4px 4px 4px 0px;

}
.footer-btn {
  /* width: 82px; */
  height: 30px;
 line-height: 30px;
  /* font-weight: Normal; */
  text-align: CENTER;

  border-radius: 5px;
  border: 1px solid #1890ff;
}

</style>
